import 'package:example/src/draggable_card_container.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class TapTapPage extends StatefulWidget {
  TapTapPage({Key key}) : super(key: key);

  @override
  _TapTapPageState createState() => _TapTapPageState();
}

class _TapTapPageState extends State<TapTapPage> {
  List<Color> bgColors = [];
  List<Widget> childItems = [];

  int currentIndex = 0;

  Swiper page;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    bgColors.add(Colors.black);
    bgColors.add(Colors.orange);
    bgColors.add(Colors.blue);
    bgColors.add(Colors.yellow);
    bgColors.add(Colors.green);

    for (var i = 0; i < bgColors.length; i++) {
      var item = DraggableCard(
        cardPadding: const EdgeInsets.only(
            top: 20.0, left: 0.0, bottom: 20.0, right: 0.0),
        card: Container(
          color: bgColors[i],
        ),
        slideTo: _desiredSlideOutDirection(),
        onSlideUpdate: _onSlideUpdate,
        onSlideComplete: _onSlideComplete,
      );
      childItems.add(item);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: new AppBar(
        title: new Text("SelfCustom Pagination"),
      ),
      body: Swiper(
        key: ValueKey(bgColors.length), // 用不同的key来创建
        outer: false,
        loop: false,
        fade: 1.0,
        viewportFraction: 0.7,
        scale: 0.8,
        index: currentIndex,
        itemBuilder: (c, index) {
          return childItems[index];
        },
        pagination: null,
        itemCount: bgColors.length,
        onIndexChanged: (index) {
          setState(() {
            currentIndex = index;
          });
          print("currentIndex $currentIndex");
        },
      ),
    );
  }

  SlideDirection _desiredSlideOutDirection() {
    return null;
  }

  void _onSlideUpdate(double distance) {
    // print(distance);
  }

  void _onSlideComplete(SlideDirection direction) {
    print("complete $direction");
    bgColors.removeAt(currentIndex);
    childItems.removeAt(currentIndex);

    // resetSwiper();

    setState(() {});
  }
}
